<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>

    <title>角色信息修改页面</title>

    <div th:replace="common/common.html :: common_resource"></div>

</head>
<style>
    .dtree {
        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
        font-size: 16px;
        color: #333333;
        white-space: nowrap;
    }
    .dTreeNode{
        margin-top: 4px;
    }
    .dtree img {
        border: 0px;
        vertical-align: middle;
    }
    .dtree a {
        color: #333;
        text-decoration: none;
    }
    .dtree a.node, .dtree a.nodeSel {
        white-space: nowrap;
        padding: 1px 2px 1px 2px;
    }
    .dtree a.node:hover, .dtree a.nodeSel:hover {
        color: #ee3333;
        text-decoration: underline;
    }
    .dtree a.nodeSel {
        background-color: #c0d2ec;
    }
    .dtree .clip {
        overflow: hidden;
    }

    /* 复选框css */
    .demo--label{display:inline-block}
    .demo--radio{display:none}
    .demo--radioInput{background-color:#fff;border:1px solid rgba(0,0,0,0.15);border-radius:100%;display:inline-block;height:16px;margin-right:8px;margin-top:-1px;vertical-align:middle;width:16px;line-height:1}
    .demo--radio:checked + .demo--radioInput:after{background-color:#57ad68;border-radius:100%;content:"";display:inline-block;height:16px;width:16px}
    .demo--checkbox.demo--radioInput,.demo--radio:checked + .demo--checkbox.demo--radioInput:after{border-radius:0}
</style>
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">

        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>角色信息修改表格</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="role_list.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                        </div>
                    </div>
                    <!-- 3D立体按钮在button的class中加入 dim -->
                    <div class="ibox-content" >
                        <div class="table-responsive" style="overflow-x: hidden">
                            <div class="row" style="margin-bottom:10px">
                                <div class="col-sm-2 b-r"></div>
                                <div class="col-sm-5 b-l">
                                    <h3 class="m-t-none m-b" style="margin-bottom:30px"><i class="fa fa-paste"></i> 新增角色信息</h3>
                                    <form th:action="@{/role/editRole}" method="post">
                                        <div class="form-group">
                                            <label>角色编号：</label>
                                            <input type="text" id="roleId" name="roleId" placeholder="请输入角色编号"
                                                   th:value="${role.roleId}" class="form-control">
                                        </div>
                                        <div class="form-group">
                                            <label>角色名称：</label>
                                            <input type="text" id="roleName" name="roleName" placeholder="请输入角色名称"
                                                   th:value="${role.roleName}" class="form-control">
                                        </div>
                                        <div class="form-group">
                                            <label>角色权限：</label>
                                            <div class="dtree">
                                                <script th:inline="javascript">
                                                    d = new dTree('d');
                                                    var limitLists = [[${limitLists}]];
                                                    var strs = [[${strs}]];
                                                    console.log("limitLists = " + limitLists);
                                                    console.log("strs = " + strs);
                                                    for(var i=0; i<limitLists.length; i++){
                                                        if(limitLists[i].limitGrade != null){
                                                            var m = 1;
                                                            for(var j=0; j<strs.length; j++){
                                                                if(strs[j] == limitLists[i].limitId){
                                                                    d.add(limitLists[i].id, limitLists[i].limitGrade, limitLists[i].limitText, '', true);
                                                                    m = 0;
                                                                }
                                                            }
                                                            if(m == 1){
                                                                d.add(limitLists[i].id, limitLists[i].limitGrade, limitLists[i].limitText);
                                                            }
                                                        }
                                                    }
                                                    document.write(d);
                                                </script>
                                                <p style="margin-top: 20px">
                                                    <a href="javascript: d.openAll();">打开全部</a> | <a href="javascript: d.closeAll();">收回全部</a>
                                                </p>
                                            </div>
                                        </div>

                                        <div style="margin-top:20px;">
                                            <button style="width:100px;margin-top:15px;margin-bottom:30px;"
                                                    class="btn btn-sm btn-primary pull-left m-t-n-xs" type="submit">
                                                <strong>提交</strong>
                                            </button>
                                            <a th:href="@{/role/findRole}">
                                                <button style="width:100px;margin-top:15px;margin-bottom:30px;margin-left:60px;"
                                                        class="btn btn-sm btn-primary pull-left m-t-n-xs" type="button">
                                                    <strong>返回</strong>
                                                </button>
                                            </a>
                                        </div>
                                    </form>
                                </div>
                                <div class="col-sm-5 b-l"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</body>
</html>
